<!--
 * @Descripttion: 
 * @version: 1.0.0
 * @Author: Wupy
 * @Date: 2023-02-06 19:42:18
 * @LastEditors: Wupy
 * @LastEditTime: 2023-02-07 08:59:34
-->
<template>
    <!-- 导航栏 -->
    <div class="navTitle">
        <div class="leftIcon"><var-icon name="chevron-left" :size="35" color="#000" @click="backRouter()" /></div>
        <div class="header">添加讨论</div>
    </div>
    <!-- 标题 -->
    <div class="discussTitle">
        <div class="title">
            讨论题目
        </div>
        <div class="content">
            <var-input class="discussTitle" placeholder="请输入讨论题目" v-model="discussTitle" />
        </div>
    </div>
    <!-- 内容 -->
    <div class="discussContent">
        <div class="title">
            讨论内容
        </div>
        <div class="content">
            <var-input class="discusscon" placeholder="请输入讨论内容" textarea v-model="discussContent" />
        </div>
    </div>
    <!-- 按钮 -->
    <button class="addButton" @click="addDiscuss()">添加讨论</button>
</template>

<script setup lang="ts">
import router from '@/router';
import { ref } from 'vue'

function backRouter() {
    router.push('/lessonDiscuss')
}
function addDiscuss(){
    
}
const discussTitle = ref('')
const discussContent = ref('')
</script>

<style lang="less" scoped>
.navTitle {
    line-height: 30px;
    display: flex;
    .leftIcon {
        margin-top: 10px;
    }
    .header{
        margin-left: 130px;
        font-size: 16px;
        margin-top: 10px;
        font-weight: 900;
    }
}
.discussTitle{
    .title{
        margin-left: 10px;
    }
    .content{
        .discussTitle{
            width: 340px;
            margin-left: 10px;
        }
    }
}
.discussContent{
    .title{
        margin-left: 10px;
    }
    .content{
        .discusscon{
            width: 340px;
            margin-left: 10px;
        }
    }
}
.addButton{
    margin:30px 10px;
    width: 340px;
    height: 50px;
    border: 1px solid black;
}
.addButton:active{
    background-color:rgb(162, 232, 243);
    color: white;
}
.addButton:focus{
    background-color:rgb(161, 222, 232);
    color: white;

}
</style>